<!--
* description: 服务管理活动查询-客户清单
* author: wangjuan
* createdDate: 2021-3-10
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :callback-obj="callbackObj"
    />
    <inEdit
      :key="inEditPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :popups-visible="inEditPopupsVisible"
      :popups-state="inEditPopupsState"
      @closeInEdit="closeInEdit"
    />
  </div>
</template>
<script>

import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'
import inEdit from './inEdit.vue'
import api from '@/api/se/serviceActivities'

export default {
  name: 'CustomerList',

  components: {
    OneTableTemplate,
    inEdit
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  props: {
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },

  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ''], function() {
      next()
    })
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      editRowData: {},
      inEditPopupsKey: '1',
      inEditPopupsState: '',
      inEditPopupsVisible: false,

      apiConfig: api.queryListCustomer,

      // 动态组件-按钮
      // tableButtons: [
        // {
        //   compKey: 'btnKey1',
        //   size: 'small',
        //   text: '邀约登记',
        //   clickEvent: () => this.inEdit(),
        //   position: 'right',
        //   disabled: true
        // }
      // ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn',
              label: '操作', // 操作
              codeField: 'orgName',
              align: 'center',
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey0',
                  align: 'center',
                  labelName: '邀约登记',
                  codeField: 'orgName',
                  clickEvent: (index) => this.inEdit(index),
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              prop: 'actionCustId',
              label: '服务活动客户ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'dlrCustNo',
              label: '客户编号',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'vin',
              label: 'VIN码',
              align: 'center'
            },
            {
              prop: 'custName',
              label: '客户姓名',
              align: 'center'
            },
            {
              prop: 'addrCityCode',
              label: '所属城市',
              align: 'center'
            },
            {
              prop: 'dlrName',
              label: '所属门店',
              align: 'center'
            },
            {
              prop: 'inviteResult',
              label: '邀约记录',
              align: 'center'
            },
            {
              prop: 'inviteStateCn',
              label: '邀约状态',
              align: 'center'
            }
          ],

      // 表单查询数据
      formField: this.$utils.getFormField(this, {
        vin: '',
        custName: '',
        inviteResult: '',
        inviteStateCn: '',
        inviteState: '',
        dlrCustNo: '',
        updateControlId: '',
        actionCustId: '',
        addrCityCode:'',//城市
        dlrName:'',//门店
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode]),

      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.selectData = selection
          this.handleSelectionChange(selection)
        },
      }
    }
  },

  watch: {
    'dataForForm': {
      handler(newVal, oldVal) {
        this.formField.actionCode = this.dataForForm.actionCode
        this.formField.actionId = this.dataForForm.actionId
        this.queryTable(1)
      },
      deep: true
    }
  },

  mounted() {
    // 列表查询
    this.queryTable(1)
  },

  methods: {
    inEdit(index) {
      this.inEditPopupsVisible = true
      this.editRowData = this.$refs.multipleTable.list[index]
    },

    // 关闭保存弹窗
    closeInEdit() {
      this.inEditPopupsVisible = false
      this.inEditPopupsKey = this.$utils.generateId()
    },
  }
}
</script>
